<template>
    <div>
        <el-row v-for="(row,rowIndex) in rows" :key="rowIndex">
            <el-col
                :key="index"
                v-for="(field,index) in row.columns"
                :span="viewData[field].type=='textarea'?24:8"
            >
                <el-form-item
                    :label="viewData[field].nameZH"
                    :prop="field+'.columnValue'"
                    :rules="getAllRules(viewData[field])"
                >
                    <span slot="label">
                        <span
                            v-if="viewData[field].nameZH && viewData[field].nameZH.length<=15"
                            :class="viewData[field].inReview?'field-checked':null"
                        >{{viewData[field].nameZH}}：</span>
                        <el-tooltip
                            v-else
                            class="item"
                            effect="light"
                            :content="viewData[field].nameZH"
                            placement="top-start"
                        >
                            <span
                                style="cursor:pointer"
                                :class="viewData[field].inReview?'field-checked':null"
                            >{{viewData[field].nameZH.substr(0,6)}}...：</span>
                        </el-tooltip>
                    </span>

                    <template v-if="!edit||!viewData[field].isEdit">
                        <!-- <span
                            :class="viewData[field].inReview?'field-checked':null"
                            v-if="viewData[field].type=='select'&&viewData[field].value=='G_XZQY'"
                        >{{getCityName(viewData[field].columnValue)}}</span> -->
                        <span
                            :class="viewData[field].inReview?'field-checked':null"
                            v-if="viewData[field].type=='select'&&viewData[field].value=='G_XZQY'"
                        >{{viewData[field].columnValue && viewData[field].columnValue.length == 6 
                        ? getCityName(viewData[field].columnValue)
                        : getTextByValue2(viewData[field].columnValue, options.G_GJQU)}}</span>
                        <span
                            :class="viewData[field].inReview?'field-checked':null"
                            v-else-if="viewData[field].type=='select'&&viewData[field].value!='G_XZQY'"
                        >{{getTextByValue(viewData[field].columnValue,options[viewData[field].value],viewData[field].isMulti)}}</span>
                        <span
                            :class="viewData[field].inReview?'field-checked':null"
                            v-else-if="viewData[field].type=='date'"
                        >{{getFormatDate(viewData[field].columnValue)}}</span>
                        <span
                            :class="viewData[field].inReview?'field-checked':null"
                            v-else
                        >{{viewData[field].columnValue}}</span>
                    </template>
                    <el-input
                        v-else-if="viewData[field].type=='input'"
                        v-model="viewData[field].columnValue"
                        :maxlength="viewData[field].length"
                        style="width:100%"
                    ></el-input>
                    <el-select
                        v-else-if="viewData[field].type=='select'&&viewData[field].value!='G_XZQY'&&viewData[field].value!='end_station'"
                        v-model="viewData[field].columnValue"
                        style="width:100%"
                        :multiple="viewData[field].isMulti"
                        :collapse-tags="viewData[field].isMulti"
                    >
                        <el-option
                            v-for="(item,_index) in options[viewData[field].value]"
                            :key="_index"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <pager-select
                        v-else-if="viewData[field].type=='select'&&viewData[field].value=='end_station'"
                        :data="options.end_station"
                        v-model="viewData[field].columnValue"
                    ></pager-select>

                    <select-tree
                        v-else-if="viewData[field].type=='select'&&viewData[field].value=='G_XZQY'"
                        :data="citys"
                        v-model="viewData[field].columnValue"
                    />
                    <el-date-picker
                        v-else-if="viewData[field].type=='date'"
                        v-model="viewData[field].columnValue"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width:100%"
                    ></el-date-picker>
                    <el-input
                        type="textarea"
                        rows="3"
                        v-else-if="viewData[field].type=='textarea'"
                        v-model="viewData[field].columnValue"
                        :maxlength="viewData[field].length"
                        style="width:100%"
                    ></el-input>
                </el-form-item>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { getRules } from "./businessMethods";
import moment from "moment";
import { getCityNameByValue } from "./businessMethods";
export default {
    name: "dynamicColumn",
    props: ["viewData", "attrs", "options", "edit", "citys"],
    data() {
        return {
            rows: null
        };
    },
    mounted() {
        let rows = [];
        let columns = [];
        this.attrs.forEach(field => {
            if (this.viewData.hasOwnProperty(field)) {
                if (this.viewData[field].type == "textarea") {
                    rows.push({ columns: [field] });
                } else {
                    if (columns.length == 0) {
                        rows.push({ columns });
                    }
                    columns.push(field);
                    if (columns.length == 3) {
                        columns = [];
                    }
                }
            }
        });
        this.rows = rows;
    },
    methods: {
        getTextByValue(val, array, isMulti) {
            if (val == null) {
                return null;
            }
            if (!array) {
                return null;
            }
            if (isMulti) {
                let values = val.toString().split(",");
                let label = [];
                values.forEach(v => {
                    let option = array.find(_ => _.value == v);
                    if (option) {
                        label.push(option.label);
                    }
                });
                return label.join(",");
            } else {
                let option = array.find(_ => _.value == val);
                return option ? option.label : null;
            }
        },
        // 当 地点columnValue为三位数
        getTextByValue2(val, array) {
            if (val == null) {
                return null;
            }
            if (!array) {
                return null;
            }
            let option = array.find(_ => _.value == val);
            return option ? option.label : null;
        },
        getFormatDate(val) {
            return val ? moment(val).format("YYYY-MM-DD") : null;
        },
        getAllRules(column) {
            let relationMap = new Map();
            relationMap.set("FATHER_ID_CODE_", "FATHER_ID_TYPE_");
            relationMap.set("MOTHER_ID_CODE_", "MOTHER_ID_TYPE_");
            let typeColumn = this.viewData[relationMap.get(column.column)];
            return getRules(
                column,
                relationMap,
                typeColumn,
                null,
                null,
                this.edit
            );
        },
        getCityName(val) {
            return getCityNameByValue(val, this.citys);
        }
    }
};
</script>
<style lang="scss" scoped>
.field-checked {
    color: #ff7800;
}
</style>